<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./time.css">
</head>

<body>
    <div class="border">
        <div class="h">1</div>
        <div class="m">2</div>
        <div class="s">3</div>
    </div>
    <button id="btn">点我发送请求</button>
</body>
<script src="./time.js"></script>
<script>
    function handleClick() {
        // 创建XMLHttpRequest对象
        // XMLHttpRequest包含了基本的属性和方法,实现对服务器的通讯
        var xhr = new XMLHttpRequest();
        // 发出http请求(请求方式、服务器地址、异步请求)
        xhr.open('GET', '/api', true);
        // 注册事件处理函数,获取响应内容
        xhr.onreadystatechange = function() {
                // 判断响应是否完成
                if (xhr.readyState == 4) {
                    // 服务器返回的状态码,判断是否请求成功
                    if (xhr.status == 200) {
                        // 接收服务器返回的响应文本
                        console.log(xhr.responseText);
                        // TODO 将数据显示在页面上
                        const jsonData = JSON.parse(xhr.responseText)
                        console.log(jsonData);
                        const btn = document.getElementById('btn')
                        btn.innerHTML = '本次请求收到数据：' + jsonData.length + '条'

                    }
                }
            }
            // 发送请求
        xhr.send(null)
    }
    const btn = document.getElementById('btn')
    btn.addEventListener('click', handleClick)
</script>

</html>